<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getStatusBarHeight()+ 'px'}"></view>
			<view class="titleBar" :style="{height:getTitleBarHeight() + 'px'}">
				<view class="title">
					{{title}}
				</view>
				
				<navigator class="search" url="/pages/serach/serach">
					<uni-icons  class="icon" type="search" color="#888" size="18"></uni-icons>
					<text>搜索</text>
				</navigator>
			</view>
			
		</view>
		<view class="fill" :style="{height: getNavBarHeight()+'px'}">
			
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'	
import {getStatusBarHeight,getTitleBarHeight,getNavBarHeight} from '@/utils/system.js'



// // #ifdef MP
// let {top,height}=uni.getMenuButtonBoundingClientRect()	//返回的对象中直接提取出 top 和 height 两个属性，并将它们的值分别赋给同名的变量 top 和 height。

// let titleBarHeight=ref((top-statusBarHeight)*2+height)

// // #endif

defineProps({
	title:{
		type:String,
		default: "壁纸"
	}
})

</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		
		background:
		linear-gradient(to bottom,rgba(255, 114, 168, 0.0) 10%,#fff ),
		linear-gradient(to right,#4fffbf 20%,#fff); 	//	渐变色
		.statusBar{
			
		}
		.titleBar{
			align-items: center;
			display: flex;
			padding:  0 30rpx;
			
			height: 100rpx;
			.title{
				font-size: 22px;
				font-weight: 700;
				color: $text-font-color-1;
			}
			.search{
				  width: 220rpx;
								  height: 50rpx;
								  border-radius: 60rpx;
								  background: rgba(255,255,255,0.4);
								  border:1px solid #fff;
								  margin-left:30rpx;
								  color:#999;
								  font-size: 28rpx;
								  display: flex;
								  align-items: center;
								  .icon{
									  margin-left:5rpx;
								  }
								  .text{
									  padding-left:10rpx;
								  }
			}
		}
	}
	.fill{
		
	}
}
</style>